{include file="common/header" /}
<div class="x-nav">
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <!--<input class="layui-input" placeholder="开始日" name="start" id="start" value="">-->
            <!--<input class="layui-input" placeholder="截止日" name="end" id="end" value="">-->
            <input type="text" name="username" value="{$title}"  placeholder="请输入角色名" autocomplete="off" class="layui-input">
            <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
    <xblock>
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" onclick="x_admin_show('添加角色','/admin/role/add')"><i class="layui-icon"></i>添加</button>
        <span class="x-right" style="line-height:40px">共有数据：{$auth_group->total()} 条</span>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
            </th>
            <th>ID</th>
            <th>角色名</th>
            <th>权限</th>
            <th>状态</th>
            <th>描述</th>
            <th>操作</th>
        </thead>
        <tbody>
        {if($auth_group)}
            {foreach($auth_group as $k=>$v)}
                <tr>
            <td>
                <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='{$v.id}'><i class="layui-icon">&#xe605;</i></div>
            </td>
            <td>{$v.id}</td>

            <td>{$v.title}</td>
            <td>
                {$v.rules}

            </td>
            <td class="td-status">
                {if($v.status == 1)}
                <span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>
                {else /}
                <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">已停用</span>
                {/if}
            </td>
            <td class="td-status">
                 {$v.describe}
            </td>
            <td class="td-manage">


                <a href="javascript:;" onclick="giveQx({$v.id})"
                   class="layui-btn layui-btn-info layui-btn-xs">
                    <i class="fa fa-paste"></i> 权限分配</a>

                {if($v.status == 1)}
                <a onclick="member_stop(this,{$v.id})" href="javascript:;" title="启用">
                    <i class="layui-icon"></i>
                </a>
                {else /}
                <a onclick="member_stop(this,{$v.id})" href="javascript:;" title="停用">
                    <i class="layui-icon"></i>
                </a>
                {/if}
                <a title="编辑"  onclick="x_admin_show('编辑','/admin/role/edit?id={$v.id}')" href="javascript:;">
                    <i class="layui-icon">&#xe642;</i>
                </a>
                <a title="删除" onclick="member_del(this,{$v.id})" href="javascript:;">
                    <i class="layui-icon">&#xe640;</i>
                </a>
            </td>
        </tr>
            {/foreach}
        {/if}
        </tbody>
    </table>
    {if($auth_group)}
        {$auth_group->render()}
    {/if}
</div>
<!-- 角色分配 -->
<div class="zTreeDemoBackground left" style="display: none" id="role">
    <input type="hidden" id="nodeid">
    <div class="form-group">
        <div class="col-sm-5 col-sm-offset-2">
            <ul id="treeType" class="ztree" style="padding-bottom: 0;"></ul>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-4 col-sm-offset-4" style="margin-bottom: 15px">
            <input type="button" value="" class="" style="border: none;" id="postform"/>
        </div>
    </div>
</div>
<link rel="stylesheet" href="/static/admin/zTree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="/static/admin/zTree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/static/admin/zTree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="/static/admin/zTree/jquery.ztree.exedit-3.5.js"></script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
    });

    /*用户-停用*/
    function member_stop(obj,id){
        var txt = $(obj).attr('title') == '启用' ? '停用' : '启用';
        layer.confirm('确认要'+txt+'吗？', function (index) {


            var status = $(obj).attr('title')=='启用'?0:1;
            $.ajax({
               url:'/admin/role/set_status',
               type:'post',
                data:{
                   status:status,
                    id:id
                },
                success:function (data) {
                   if(data.code == 200){
                       if($(obj).attr('title')=='启用'){
                           //发异步把用户状态进行更改
                           $(obj).attr('title','停用')
                           $(obj).find('i').html('&#xe62f;');
                           $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                           layer.msg('已停用!',{icon: 6,time:1000});
                       }else{
                           $(obj).attr('title','启用')
                           $(obj).find('i').html('&#xe601;');

                           $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                           layer.msg('已启用!',{icon: 6,time:1000});
                       }
                   }else {
                       layer.msg(data.msg,{icon: 5,time:1000});
                   }
                },
                error:function () {
                    layer.msg('网络错误',{icon: 5});
                }
            });
        });
    }
    /*用户-删除*/
    function member_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            //发异步删除数据
            $.ajax({
                url:'/admin/role/del',
                type:'post',
                data:{
                    id:id
                },
                success:function (data) {
                    console.log(data);
                    if(data.code == 200){

                        //捉到所有被选中的，发异步进行删除
                        $(obj).parents("tr").remove();
                        layer.msg('已删除!',{icon:1,time:1000});

                    }else {
                        layer.msg('删除失败', {icon: 5});
                    }
                },
                error:function (res) {
                    layer.msg('网络错误',{icon:5,time:1000});
                }
            });


        });
    }

    //分配权限
    function giveQx(id) {
        $("#nodeid").val(id);
        //加载层
        index2 = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
        //获取权限信息
        $.getJSON('/admin/role/get_rules', { 'id': id}, function (res) {

            layer.close(index2);
            if (res.code == 200) {
                zNodes = res.data;  //将字符串转换成obj
                //页面层
                index = layer.open({
                    type: 1,
                    area: ['350px', '80%'],
                    title: '权限分配',
                    skin: 'layui-layer-demo', //加上边框
                    content: $('#role'),
                    btn: ['确认分配', '取消'],
                    btnAlign: 'c',
                    yes: function () {
                        $('#postform').click();
                    },
                    end: function () {
                        $('#role').hide();
                    }
                });

                //设置zetree
                var setting = {
                    check: {
                        enable: true
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    }
                };

                $.fn.zTree.init($("#treeType"), setting, zNodes);
                var zTree = $.fn.zTree.getZTreeObj("treeType");
                zTree.expandAll(true);

            } else {
                layer.alert(res.msg);
            }

        });
    }
    //确认分配权限
    $("#postform").click(function () {
        var zTree = $.fn.zTree.getZTreeObj("treeType");
        var nodes = zTree.getCheckedNodes(true);
        var NodeString = '';
        $.each(nodes, function (n, value) {
            if (n > 0) {
                NodeString += ',';
            }
            NodeString += value.id;
        });
        var id = $("#nodeid").val();
        //写入库
        $.post('/admin/role/set_rules', { 'id': id, 'rule': NodeString}, function (res) {
            layer.close(index);
            if (res.code == 200) {
                layer.msg(res.msg, {icon: 1, time: 1500, shade: 0.1}, function () {
                });
                window.location.reload();
            } else {
                layer.msg(res.msg);
            }

        }, 'json')
    })

    function delAll (argument) {

        var data = tableCheck.getData();
        console.log(data);


        layer.confirm('确认要删除吗？'+data,function(index){

            $.ajax({
                url:'/admin/role/del',
                type:'post',
                data:{
                    id:data
                },
                success:function (data) {
                    console.log(data);
                    if(data.code == 200){

                        //捉到所有被选中的，发异步进行删除
                        layer.msg('删除成功', {icon: 1});
                        $(".layui-form-checked").not('.header').parents('tr').remove();

                    }else {
                        layer.msg('删除失败', {icon: 5});
                    }
                },
                error:function (res) {
                    layer.msg('网络错误',{icon:5,time:1000});
                }
            });



        });
    }
</script>
{include file="common/footer" /}